@extends('admin.common.main')

@section('cnt')
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 
    <span class="c-gray en">&gt;</span> 用户中心 
    <span class="c-gray en">&gt;</span> 添加用户 
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>
<article class="page-container">
    {{-- 表单验证提示 --}}
    @include('admin.common.validate')
    <form action="{{ route('admin.admin-users.store') }}" method="post" class="form form-horizontal" id="form-member-add">

        @csrf
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="truename" value="{{ old('truename') }}">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户名：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="username" value="{{ old('username') }}">
			</div>
        </div>
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>密码：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="password" id="password" autocomplete="off">
			</div>
        </div>
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="password_confirmation" autocomplete="off">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<div class="radio-box">
					<input id="sex-1" name="sex" type="radio" value="先生" checked>
					<label for="sex-1">先生</label>
				</div>
				<div class="radio-box">
					<input id="sex-2" type="radio" value="女士" name="sex">
					<label for="sex-2">女士</label>
				</div>
			</div>
        </div>
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>状态：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<div class="radio-box">
					<input id="status-1" name="status" type="radio" value="0">
					<label for="status-1">禁用</label>
				</div>
				<div class="radio-box">
					<input id="status-2" type="radio" value="1" name="status" checked>
					<label for="status-2">启用</label>
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">手机：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="phone" value="{{ old('phone') }}">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">邮箱：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="email" class="input-text"  name="email" value="{{ old('email') }}">
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="添加用户">
                <input class="btn btn-info radius" type="button"  onclick="history.go(-1)" value="返回">
			</div>
		</div>
	</form>
</article>
@endsection

@section('js')
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script>
        // 单选框样式
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form-member-add").validate({
            //规则
            rules:{
                truename: {
                    required: true
                },
                username: {
                    required: true
                },
                password: {
                    required: true
                },
                password_confirmation: {
                    equalTo: "#password"    //两次密码一致
                },
                phone: {
                    phone: true
                },
                email: {
                    email:true
                }
            },
            messages:{
                truename: {
                    required: '真实姓名不能为空！'
                },
            },
            onkeyup:false,  // 回车不能提交
            success:"valid",
            // 验证通过后的处理方法
            submitHandler:function(form){
                // 表单提交
                form.submit();
            }
        });

        // 自定义验证规则--验证手机号
        jQuery.validator.addMethod("phone", function(value, element){
            var reg =  /^((\+?86-?)|(\(\+86-?\)))?1\d{10}$/;
            return this.optional(element) || (reg.test(value))
        },"请正确填写您的手机号码！");
    </script>
@endsection